<template>
  <div class="timeline">
    <el-timeline :reverse="true">
      <el-timeline-item
        :timestamp="item.time"
        placement="top"
        v-for="(item,i) in list"
        :key="i"
        :reverse="false"
      >
        <el-card>
          <h3>{{item.title}}</h3>
          <p>{{item.body1}}</p>
          <p>{{item.body2}}</p>
          <p>{{item.body3}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async getTimelineList() {
      const res = await this.$http.get("/timeline");
      this.list = res.data[0].content;
    },
  },
  created() {
    this.getTimelineList();
  },
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .timeline {
    // width: 1600px;
    width: 100%;
    padding: 20px;
    .el-timeline {
      // width: 1200px;
      width: 82%;
      margin: 0 auto;
      p{
        font-size: 14px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .el-timeline {
    margin: 0 auto;
    width: 99%;
    padding: 20px;
    p{
        font-size: 14px;
      }
  }
}
</style>
